// JavaScript Document
var page = page || {};
(function(page){
	//init function
	function init(){
		var name = page.drag.defaults.name;
		var nodes = document.getElementsByName(name);
		page.drag.defaults.targets = nodes;
	}
	function bindEvent(){
		var nodes = page.drag.defaults.targets;
		for(var i = 0;i<nodes.length;i++){
			var target = nodes[i];
			target.onmousedown = mouseDown;
			target.onmouseout = mouseUp;
			//target.onmouseup = mouseUp;
			target.style.cursor="pointer";
			target.style.position="absolute";
		}
	}
	function mouseDown(event){
		var target = getTarget(event);
		target.onmousemove = target.onmousemove?null:mouseMove;
		page.drag.defaults.X = event.pageX||event.clientX;
		page.drag.defaults.Y = event.pageY||event.clientY;
	}
	function mouseMove(event){
		event = event||window.event;
		var x = event.pageX||event.clientX;
		var y = event.pageY||event.clientY;
		var target = getTarget(event);
		var l = x - page.drag.defaults.X;
		var t = y - page.drag.defaults.Y;
		with(target.style){
			left = target.offsetLeft + l  + "px";
			top = target.offsetTop + t  + "px";
		}
		page.drag.defaults.X = x;
		page.drag.defaults.Y = y;
	}
	function mouseUp(event){
		var target = getTarget(event);
		target.onmousemove = null;
	}
	function setName (name){
		page.drag.defaults.name = name;
	} 
	function getTarget(event){
		var node = event.target||event.srcElement;
		while(node.style.position != "absolute"){
			if(node.tagName == "BODY"){
				break;
			}
			node = node.parentElement;
		}
		return node;
	}
	//  
	page.drag = function(){
		init();
		bindEvent();
	}
	//you can set name with this funciton by yourself
	page.drag.setName = setName;
	page.drag.defaults = {
		name:"drag_node",
		targets:[],
		X:0,
		Y:0,
	}
})(page);
window.onclick = function(event){
	event.prev
}

